<template>
    <div class="page-invest">
        <mu-appbar style="width: 100%; text-align: center; position: fixed; z-index: 100;" :z-depth="4" color="#29B6F6" title="投资理财"></mu-appbar>
        <div style="height: 56px;"></div>
        <Product :data="list"></Product>
        <mu-container class="button-wrapper" v-if="list.length">
                <mu-button v-if="isShow" flat large color="success" @click="showMoreList">
                    <mu-icon right value="cached"></mu-icon>
                    点击查看更多
                </mu-button>
                <mu-button v-else class="disabled" flat large color="grey300" textColor="grey300" disabled>
                    <mu-icon value="not_interested"></mu-icon>
                    暂时没有了
                </mu-button>
        </mu-container>
        <div class="footer-space"></div>
        <bottomNav></bottomNav>
    </div>
</template>

<script>
    // 引入底部导航组件
    import BottomNav from '@c/BottomNav';
    // 引入产品列表组件
    import Product from '@c/Product';
    // 暴露接口
    export default {
        // 注册组件
        components: { BottomNav, Product },
        // 数据
        data() {
            return {
                // 显示的数据
                list: [],
                // 剩余数据
                others: [],
                // 显示查看更多 或 暂时没有了 按钮
                isShow: true
            }
        },
        // 方法
        methods: {
            // 获取数据的方法
            getData() {
                // 显示加载动画并保存至句柄变量
			    const loading = this.$loading();
                // 发送请求
                this.$http({
                    url: '/api/product/list',
                    method: 'POST'
                })
                // 状态监听
                .finally(() => {
                    // 关闭动画
                    loading && loading.close();
                })
                // 监听数据返回
                .then(({ data }) => {
                    // console.log(data);
                    // 如果成功
                    if (data.code === 0) {
                        // 存储返回的数据
                        this.others = data.data;
                        // 存储显示的数据
                        this.list = this.others.splice(0, 5);
                    } else {
                        // 失败提示信息
                        this.$toast.error(data.msg);
                    }
                })
                // 错误监听
			    .catch(err => console.log(err));
            },
            // 显示更多产品信息
            showMoreList() {
                // 将others中的数据添加到list中
                this.list = this.list.concat(this.others.splice(0, 5));
                // 如果没有剩余数据
                if(!this.others.length) {
                    // 显示暂时没有了 按钮
                    this.isShow = false;
                }
            }
        },
        // 组件创建完成
        created() {
            // 获取数据
            this.getData()
        }
    }

</script>

<style lang="scss">
.page-invest {
    .footer-space {
		height: 60px;
		width: 100%;
	}
    max-width: 540px;
	margin: 0 auto;
    .button-wrapper {
        text-align: center;
        .mu-button {
            margin: 20px auto;
            &.disabled {
                background-color: #E6E6E6;
            }
        }
    }
    .mu-button .mu-icon-right {
        margin-left: 0;
        margin-right: 8px;
    }
    .mu-button.disabled {
        width: 84%;
        .mu-icon {
            margin-right: 5px;
        }
    }
}
</style>